<template>
  <div class="searchBanner" v-if="banners">
    <van-swipe
      :autoplay="5000"
      style="width: 375px; height: 202px"
      @change="onChange"
    >
      <van-swipe-item
        style="width: 360px; height: 202px; padding: 0 7.5px"
        v-for="(banner, index) in banners"
        :key="index"
        @click="toArticle(banner.url)"
      >
        <van-image
          width="360px"
          height="auto"
          radius="10px"
          lazy-load
          :src="banner.cover"
        />
        <div class="title">{{ banner.title }}</div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <span>{{ current + 1 }}</span
          >&nbsp;/&nbsp;{{ banners.length }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["banners"],
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    toArticle(url) {
      if (url.indexOf("/article") != -1) {
        let id = url.split("article/")[1].split("?")[0];
        // console.log(id);
        this.$router.push({ path: "/article", query: { id } });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.searchBanner {
  margin-top: 15px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    left: 20px;
    bottom: 10px;
  }

  .custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 14px;
    color: white;

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
